Schema 設計

Schema 分為兩種
一種是 Client 與 Service 溝通的介面，也就是 GraphQL Schema
一種是資料庫儲存的格式

GraphQL Schema

根據上一篇所整理出來的功能，分為 Query 跟 Mutation

Query

• 查詢待辦事項
  TodoTasks(TaskArgs): TaskConnection
• 查詢已完成事項
  DoneTasks(TaskArgs): TaskConnection

Mutation

• 新增待辦事項
  CreateTask(TaskInput): Task!
• 更改待辦事項狀態
  UpdateTask(ID!, UpdateTaskArgs): Task!
• 編輯待辦事項內容
  UpdateTask(ID!, UpdateTaskArgs): Task!

Type

type Task {
    id
    title
    content
    status
}

type TaskConnection {
    taskCount
    [task]
}

input TaskInput {
    title
    content
}

type UpdateTaskArgs {
    title,
    content,
    active,
    status
}

type TaskArgs {
    status,
    start,
    pageSize

}

DB Schema

在資料庫中我們會建立一個 Task Collection
一個待辦事項為一個單位，每一個待辦事項等於一個 Task
接下來根據 UI 的需求設計欄位

{
    id,         # 唯一識別號
    title,      # 標題
    content,    # 內容
    status,     # 狀態 (waitting, done)
    active,     # 是否有效 (Boolean)
    createAt,   # 建立時間 (Date)
    updateAt    # 更新時間 (Date)
}

Resolver

根據上面設計的 Schema ，將 Resolver 寫完整
參數以及 Model 的部分就不一一解說，有興趣的讀者可以到 github 看

import { Resolver, Query, Mutation, Args, ID } from '@nestjs/graphql';
import { Task } from './models/task.model';
import { TaskInput } from './input/task.input';
import { UpdateTaskArgs } from './args/task.update.args';
import { TaskArgs } from './args/task.args';

@Resolver()
export class TasksResolver {
    
    @Query(() => TaskConnection)
    async todoTasks(
        @Args() taskArgs: TaskArgs
    ) {}

    @Query(() => TaskConnection)
    async doneTasks(
        @Args() taskArgs: TaskArgs
    ) {}
    
    @Mutation(() => Task)
    async createTask(@Args('taskData') taskData: TaskInput) {}

    @Mutation(() => Task) 
    async updateTask(
        @Args('id', { type: () => ID }) id: String,
        @Args() updateTaskArgs: UpdateTaskArgs
    ) {}
 }

實作過程中遇到了一些問題，跟讀者們分享一下
在設計 Task 的狀態時，我使用 Enum 型態，要注意的是必須在用 registerEnumType 註冊一次才能使用
定義的值也必須給予等號 String ，否則會出現錯誤

export enum TaskStatus {
    WAITING='WAITING',
    DONE='DONE'
}

registerEnumType(TaskStatus, {
    name: 'TaskStatus'
})

由 NestJs 自動編譯後，產生的 gql 與我們一開始定義的基本上是一樣的

# ------------------------------------------------------
# THIS FILE WAS AUTOMATICALLY GENERATED (DO NOT MODIFY)
# ------------------------------------------------------

type Task {
  id: ID!
  title: String!
  content: String!
  status: TaskStatus!
}

enum TaskStatus {
  WAITING
  DONE
}

type TaskConnection {
  taskCount: Float!
  tasks: [Task!]!
}

type Query {
  todoTasks(start: Int = 0, pageSize: Int = 10): TaskConnection!
  doneTasks(start: Int = 0, pageSize: Int = 10): TaskConnection!
}

type Mutation {
  createTask(taskData: TaskInput!): Task!
  updateTask(title: String, content: String, active: Boolean, status: TaskStatus, id: ID!): Task!
}

input TaskInput {
  title: String!
  content: String!
}

以上就完成了 Schema 設計，打開 Playground 也能看到 Document